import 'package:flutter/material.dart';

class RowPage1 extends StatelessWidget {
  const RowPage1({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          appBar: AppBar(),
          body: Container(
            height: 200,
            width: double.infinity,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Container(
                    width: 100,
                    height: 100,
                    alignment: Alignment.center,
                    decoration: BoxDecoration(
                        border: Border.all(
                            color: const Color.fromRGBO(233, 233, 233, 0.9),
                            width: 1),
                        color: Colors.yellow),
                    child: Text(
                      '3',
                      textAlign: TextAlign.center,
                      overflow: TextOverflow.ellipsis, //超出省略号显示
                      style: const TextStyle(fontSize: 14),
                    )),
                Container(
                    width: 100,
                    height: 100,
                    alignment: Alignment.center,
                    decoration: BoxDecoration(
                        border: Border.all(
                            color: const Color.fromRGBO(233, 233, 233, 0.9),
                            width: 1),
                        color: Colors.red),
                    child: Text(
                      '2',
                      textAlign: TextAlign.center,
                      overflow: TextOverflow.ellipsis, //超出省略号显示
                      style: const TextStyle(fontSize: 14),
                    )),
                Container(
                    width: 100,
                    height: 100,
                    alignment: Alignment.center,
                    decoration: BoxDecoration(
                        border: Border.all(
                            color: const Color.fromRGBO(233, 233, 233, 0.9),
                            width: 1),
                        color: Colors.grey),
                    child: Text('1',
                        textAlign: TextAlign.center,
                        overflow: TextOverflow.ellipsis, //超出省略号显示
                        style: const TextStyle(fontSize: 14)))
              ],
            ),
          )),
    );
  }
}

class RowPage2 extends StatelessWidget {
  const RowPage2({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          appBar: AppBar(),
          body: Container(
            height: double.infinity,
            width: double.infinity,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Container(
                    width: 100,
                    height: 100,
                    alignment: Alignment.center,
                    decoration: BoxDecoration(
                        border: Border.all(
                            color: const Color.fromRGBO(233, 233, 233, 0.9),
                            width: 1),
                        color: Colors.yellow),
                    child: Text(
                      '3',
                      textAlign: TextAlign.center,
                      overflow: TextOverflow.ellipsis, //超出省略号显示
                      style: const TextStyle(fontSize: 14),
                    )),
                Container(
                    width: 100,
                    height: 100,
                    alignment: Alignment.center,
                    decoration: BoxDecoration(
                        border: Border.all(
                            color: const Color.fromRGBO(233, 233, 233, 0.9),
                            width: 1),
                        color: Colors.red),
                    child: Text(
                      '2',
                      textAlign: TextAlign.center,
                      overflow: TextOverflow.ellipsis, //超出省略号显示
                      style: const TextStyle(fontSize: 14),
                    )),
                Container(
                    width: 100,
                    height: 100,
                    alignment: Alignment.center,
                    decoration: BoxDecoration(
                        border: Border.all(
                            color: const Color.fromRGBO(233, 233, 233, 0.9),
                            width: 1),
                        color: Colors.grey),
                    child: Text('1',
                        textAlign: TextAlign.center,
                        overflow: TextOverflow.ellipsis, //超出省略号显示
                        style: const TextStyle(fontSize: 14)))
              ],
            ),
          )),
    );
  }
}
